<template>
  <div id="classify">
    <mt-search :value.sync="value"></mt-search>
    <div class="kong"></div>
    <el-container>
      <el-aside width="100px">
        <h3>分类</h3>
        <div class="class-menu">
          <ul>
            <li class="activer">分类1</li>
            <li>分类1</li>
            <li>分类1</li>
            <li>分类1</li>
            <li>分类1</li>
          </ul>
        </div>
      </el-aside>
      <el-main>
        <div class="ad">
          <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522507520446&di=0620879bd8cb47758c473039c2f257c1&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01c03658835edfa801219c77b08ab3.jpg">
        </div>
        <div class="childClass">
          <ul>
            <li class="child-active">分类1</li>
            <li>分类1</li>
            <li>分类1</li>
            <li>分类1</li>
          </ul>
        </div>
        <div class="goods">
          <ul>
            <li>
              <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522507520446&di=0620879bd8cb47758c473039c2f257c1&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01c03658835edfa801219c77b08ab3.jpg">
              <p>价格</p>
              <p>名称</p>
            </li>
            <li>
              <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522507520446&di=0620879bd8cb47758c473039c2f257c1&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01c03658835edfa801219c77b08ab3.jpg">
              <p>价格</p>
              <p>名称</p>
            </li>
            <li>
              <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522507520446&di=0620879bd8cb47758c473039c2f257c1&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01c03658835edfa801219c77b08ab3.jpg">
              <p>价格</p>
              <p>名称</p>
            </li>
            <li>
              <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522507520446&di=0620879bd8cb47758c473039c2f257c1&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01c03658835edfa801219c77b08ab3.jpg">
              <p>价格</p>
              <p>名称</p>
            </li>

            <li>
              <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522507520446&di=0620879bd8cb47758c473039c2f257c1&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01c03658835edfa801219c77b08ab3.jpg">
              <p>价格</p>
              <p>名称</p>
            </li>

            <li>
              <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522507520446&di=0620879bd8cb47758c473039c2f257c1&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01c03658835edfa801219c77b08ab3.jpg">
              <p>价格</p>
              <p>名称</p>
            </li>

            <li>
              <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522507520446&di=0620879bd8cb47758c473039c2f257c1&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01c03658835edfa801219c77b08ab3.jpg">
              <p>价格</p>
              <p>名称</p>
            </li>
          </ul>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>

export default {
  name: 'classify',
  data () {
    return {
      msg: '分类',
      value: '拍立得',
      catId: '1'
    }
  },
  methods: {
  },
  components: {
  }
}
</script>

<style lang="less">
#classify{
  .mint-search{
    height: 52px;
  }
  .el-container{
    background: #ffffff;
    min-height: calc(~"100vh - 155px");
  }
  .el-aside{
    /*padding: 20px 0;*/
    background: #eaeaea;
    text-align: center;
      h3{line-height: 50px;}
      .activer{
      background: #26a2ff;
        color: #ffffff;
      }
      .class-menu ul li{
        line-height: 40px;
        cursor: pointer;
      }
  }
  .ad{
    img{
      width: 100%;
      height: 100px;
      border-radius: 4px;
    }
  }
  .childClass{
    width: 100%;
    height: auto;
    display: block;
    overflow: hidden;
    padding: 20px 0;
    ul li{
      text-align: center;line-height: 28px;background: #e7ebf3;color: #444444;border-radius: 15px;padding: 0 20px;float: left;margin: 0 5px;display: inline-block;
      font-size: 12px;cursor: pointer;
    }  .child-active{
         background: #68b6ff;color: #ffffff;
       }
  }
  .goods{
    width: 100%;
    height: auto;
    display: block;
    overflow: hidden;
      ul li{
        float: left;
        margin: 10px;
        line-height: 24px;
        text-align: center;
        img{width: 100px;height: 100px}
      }
  }

}
</style>
